<template>
  <div class="dzgl">
    <div class="title">
      <span @click="$router.go(-1)">返回</span>
      <span>地址管理</span>
      <span @click="tzdz">新增地址</span>
    </div>
    <p v-if="obj.zt == false"><van-empty description="描述文字" /></p>
    <div class="dzkp" v-if="obj.zt == true" v-for="(item, index) in obj.list">
      <p class="pp">
        <span class="name">{{ item.user_name }}</span
        ><span>{{ item.mobile }}</span>
      </p>
      <p class="pp1">{{ item.region_name }}</p>
      <li class="xian"></li>
      <div class="box">
        <li class="ll">
          <input
            :value="index"
            @change="mrdz(item)"
            type="radio"
            name="aaa"
            :checked="item.is_default == 1"
          /><span>默认地址</span>
        </li>
        <li class="l2">
          <span>编辑</span>
          <span @click="del(item.id)">删除</span>
        </li>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { getshdz, szmrdz, deldz } from "../http/api.js";
const router = useRouter();
const obj = reactive({
  title: "地址管理",
  you: "新增地址",
  zt: false,
  list: [],
  zt1: "",
});
// 点击新增地址;
const tzdz = () => {
  router.push("/xzdz");
};
// 点击删除
const del = async (id) => {
  const res = await deldz(id);
  getdz();
};
// 点击复选框设置编辑默认地址
const mrdz = async (i) => {
  console.log(i);
  const res = await szmrdz(i.id);
  console.log(res);
  if (i.is_default == 1) {
    obj.zt1 = true;
  } else {
    obj.zt1 = false;
  }
  console.log(obj.zt);
  // getdz();
};
// 获取收货地址
const getdz = async () => {
  const res = await getshdz();
  if (res.data.data.length > 0) {
    obj.zt = true;
    obj.list = res.data.data;
  } else {
    obj.zt = false;
  }
};
getdz();
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  span {
    font-size: 26px;
  }
}
.name {
  margin-right: 15px;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp {
  margin: 6px 0;
}
.dzkp {
  padding: 15px;
  font-size: 20px !important;
  span {
    font-size: 26px !important;
  }
}
.pp1 {
  font-size: 25px;
}
.xian {
  width: 100%;
  height: 2px;
  background: #ccc;
  margin: 8px 0;
}
.ll {
  margin: 8px 0;
}
.box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.l2 {
  span {
    margin-right: 18px;
  }
}
</style>
